import { connect } from 'dva'
import { Form, Icon, Input, Button, Checkbox, Row, Col, Spin} from 'antd'
import React from 'react'
import styles from './index.scss'

const FormItem = Form.Item

const Login = ({
  dispatch,
  loginData,
  requestState,
  form:{
    getFieldDecorator,
    validateFields
  }
}) => {
  console.log(loginData, requestState)
  const handleSubmit = (e) => {
    e.preventDefault()
    validateFields((err, values) => {
      if (!err) {
        console.log('表单的数据: ', values)
        dispatch({
          type: 'login/login',
          payload: values
        })
      }
    })
  }
  const formItemLayout = {
    labelCol: {
      xs: { span: 24 },
      sm: { span: 6 }
    },
    wrapperCol: {
      xs: { span: 24 },
      sm: { span: 12 }
    }
  }
  const formItemButton = {
    wrapperCol: {
      xs: { span: 24 , offset: 0},
      sm: { span: 12 , offset: 6}
    },
  }
  return (
      <Row className={styles.loginContainer}>
        <Col span={12} className={styles.allCenter}>
        <Spin spinning={requestState}>
          <Form onSubmit={handleSubmit} className={styles.loginForm}>
            <FormItem
              {...formItemLayout}
              label='用户名'
            >
              {getFieldDecorator('userName', {
                rules: [{ required: true, message: '请输入用户名!' }]
              })(
                <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="用户名" />
              )}
            </FormItem>
            <FormItem
              {...formItemLayout}
              label='密码'
            >
              {getFieldDecorator('password', {
                rules: [{ required: true, message: '请输入密码!' }],
              })(
                <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="密码" />
              )}
            </FormItem>
            <FormItem
              {...formItemButton}
            >
              {getFieldDecorator('remember', {
                valuePropName: 'checked',
                initialValue: true,
              })(
                <Checkbox style={{color: 'red'}}>记住我</Checkbox>
              )}
              <a className={styles.loginFormForgot} href="">忘记密码</a>
              <Button type="primary" htmlType="submit" className={styles.loginFormButton}>
                登录
              </Button>
              Or <a href="">马上注册!</a>
            </FormItem>  
          </Form>
        </Spin>
        </Col>
      </Row>
    )
}

const WrappedLogin = Form.create()(Login)
const mapStateToProps = state => {
  return {
    loginData: state.login.data,
    requestState: state.app.requestState
  }
}

export default connect(mapStateToProps)(WrappedLogin)